<template>
  <div>
      <page-main class="searchMain">
            <!-- 搜索 -->
            <div class="searchBox">
                <span>搜索</span>
                <el-input v-model="searchValue" class="search" @keyup.enter="searchInputList" placeholder="请输入ID 单位名称或者监管等级"></el-input>
            </div>
      </page-main>
    <page-main>
      <!-- <el-button size="mini" type="primary" @click="addEditSocialUnit">添加</el-button> -->
      <!-- <el-table
        :data="
          tableData.filter(
            (data) =>
              !search || data.name.toLowerCase().includes(search.toLowerCase())
          )
        "
      > -->
      <el-table
        :data="
          tableData
        "
        :default-sort="{prop: 'id', order: 'ascending'}"
      >

        <el-table-column label="地区" prop="region_name"> </el-table-column>
        <el-table-column label="子单位名称" prop="name"> </el-table-column>
        <el-table-column label="社会单位名称" prop="unit_name">
        </el-table-column>
        <el-table-column label="安全员姓名" prop="safety_officer">
        </el-table-column>
        <el-table-column label="安全员电话" prop="safety_officer_mobile">
        </el-table-column>
        <el-table-column label="查看详情">
          <template #default="scope">
            <el-button size="mini" type="primary" @click="lookDetails(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作"  fixed="right" >
          <template #header>
            <el-button size="mini" type="primary" @click="addEditSocialUnit">添加</el-button>
          </template>
          <template #default="scope">
            <el-button size="mini" style="margin-top: 10px;" @click="handleEdit(scope.$index, scope.row)"
              >修改</el-button
            >
            <el-button type="info"  size="mini" @click="toTaskList(scope.$index, scope.row)" style="margin-top: 10px;">任务巡查</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
        <el-pagination
        :current-page="pagination.page"
        :total="total"
        :page-size="pagination.size"
        :page-sizes="pagination.sizes"
        :layout="pagination.layout"
        :hide-on-single-page="false"
        class="pagination"
        background
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />
      <!-- <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          v-model:currentPage="tableDataInfo.page"
          :page-count="tableDataInfo.total_page"
          layout="prev, pager, next, jumper"
          :hide-on-single-page="true"
        >
        </el-pagination>
      </div> -->
    </page-main>
    <el-dialog
      v-model="dialogFormVisible"
      width="70%"
      @close="closeDialog"
      :close-on-click-modal="false"
      destroy-on-close
    >
      <el-form ref="childForm" :rules="rules" :model="formData" :disabled="disabled">
        <el-row>
          <el-col :span="6" :offset="1">
            <el-form-item label="名称" prop="name">
              <el-input v-model="formData.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="1">
            <el-form-item label="全名" prop="full_name">
              <el-input v-model="formData.full_name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="1">
            <el-form-item label="详细地址" prop="address">
              <el-input v-model="formData.address"></el-input>
            </el-form-item>
          </el-col>
          <!-- 社会单位选择 -->
          <el-col :span="6" :offset="1">
            <el-form-item label="社会单位选择" prop="unit_id">
              <el-select v-model="formData.unit_id"  placeholder="请选择" filterable>
                <el-option
                  v-for="item in societyList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8" :offset="1">
            <el-form-item label="单位坐标" prop="longitude">
              <div style="display: flex; align-item: center;">
                <el-input
                  style="width: 40%; margin-right: 1%;"
                  disabled
                  v-model="formData.longitude"
                ></el-input>
                <el-input
                  style="width: 40%; margin-right: 1%;"
                  disabled
                  v-model="formData.latitude"
                ></el-input>

                <el-button @click="mapIsShow = true">定位</el-button>
              </div>
            </el-form-item>
          </el-col> -->
             <!-- 门前三包 -->
          <!-- <el-col :span="4" :offset="1">
            <el-form-item label="门前三包" prop="door_front_file">
              <el-upload
                :action="upDataUrl + '/unit/upload/upload'"
                :on-change="doorChange"
                :file-list="doorFileList"
                :headers="upLoadImgHeader"
                :data="upLoadImgData"
                limit="1"
                :on-exceed="onExceed"
                :on-success="doorFileUpSuccess"
                list-type="picture-card"
                class="door"
                :before-remove="doorRemove"
                accept=".jpg,.png,.jpeg"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col> -->
          <!-- 安全承诺书 -->
          <el-col :span="4" :offset="1">
            <el-form-item label="安全承诺书" prop="safe_promise_file">
              <el-upload
                :action="upDataUrl + '/unit/upload/upload'"
                :on-change="safeChange"
                :file-list="safeFileList"
                :headers="upLoadImgHeader"
                :data="upLoadImgData"
                limit="1"
                :on-exceed="onExceed"
                :on-success="safeFileUpSuccess"
                list-type="picture-card"
                class="safe"
                :before-remove="safeRemove"
                accept=".jpg,.png,.jpeg"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <!-- 三自主两公开一承诺 -->
          <el-col :span="5" :offset="1">
            <el-form-item label="三自主两公开一承诺" prop="org_promise_file">
              <el-upload
                :action="upDataUrl + '/unit/upload/upload'"
                :on-change="orgChange"
                :file-list="orgFileList"
                :headers="upLoadImgHeader"
                :data="upLoadImgData"
                limit="1"
                :on-exceed="onExceed"
                :on-success="orgFileUpSuccess"
                list-type="picture-card"
                class="org"
                :before-remove="orgRemove"
                accept=".jpg,.png,.jpeg"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <!-- 疏散路线图 -->
          <el-col :span="6" :offset="1">
            <el-form-item label="疏散路线图" prop="escape_map">
                <el-upload
                    :action="upDataUrl + '/unit/upload/upload'"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    :file-list="imgFileList"
                    :headers="upLoadImgHeader"
                    :data="upLoadImgData"
                    limit="1"
                    :on-exceed="onExceed"
                    :on-success="imgUpSuccess"
                    class="img"
                    :before-remove="imgRemove"
                    :on-change="imgChange"
                    accept=".jpg,.png,.jpeg"
                    >
                <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="1">
            <el-form-item label="安全责任人姓名" prop="safety_name">
              <el-input v-model="formData.safety_name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="1">
            <el-form-item label="安全责任人电话" prop="safety_mobile">
              <el-input v-model="formData.safety_mobile" oninput="value=value.replace(/[^\d]/g,'')" :maxlength="11"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="1">
            <el-form-item label="安全管理员姓名" prop="scseca_name"
              ><el-input v-model="formData.scseca_name"></el-input
            ></el-form-item>
          </el-col>
          <el-col :span="6" :offset="1">
            <el-form-item label="安全管理员电话" prop="scseca_mobile"
              ><el-input v-model="formData.scseca_mobile" oninput="value=value.replace(/[^\d]/g,'')" :maxlength="11"></el-input
            ></el-form-item>
          </el-col>
          <el-col :span="6" :offset="1">
            <el-form-item label="安全员姓名" prop="safety_officer">
              <el-input v-model="formData.safety_officer"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="1">
            <el-form-item label="安全员电话" prop="safety_officer_mobile">
              <el-input v-model="formData.safety_officer_mobile" oninput="value=value.replace(/[^\d]/g,'')" :maxlength="11"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="1">
            <el-form-item label="状态">
              <el-switch
                v-model="formData.status"
                active-text="正常"
                inactive-text="禁用"
                :active-value="1"
                :inactive-value="0"
              ></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
      </template>
      <!-- 地图 -->
      <div class="mapBox" v-show="mapIsShow">
        <div class="search">
            <span type="primary">搜索</span>
            <el-input placeholder="请输入内容" v-model="searchInput" @input="inputChange">
                <template #prefix>
                <i class="el-input__icon el-icon-search"></i>
                </template>
            </el-input>
        </div>
        <div id="container"></div>
        <div class="btnBox">
            <el-button type="primary" class="btn" @click="mapIsShow = false">确定</el-button>
            <el-button @click="cancelMap">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import storage from "@/util/storage";
import { ElMessage } from "element-plus";
// 分页
import paginationMixin from '@/mixins/pagination'
export default {
    // 分页
    mixins: [paginationMixin],
  data() {
    return {
        total: 0,
        searchValue: '',
        searchInput: '',
        mapIsShow: false,
      upLoadImgData: {
        type: "image",
      },
      disabled: false,
      upDataUrl: import.meta.env.DEV
        ? "/proxy/"
        : import.meta.env.VITE_APP_API_BASEURL,
      tableData: [],
      search: "",
      tableDataInfo: "",
      fatherId: "",
      dialogFormVisible: false,
      formData: {
        name: "",
        full_name: "",
        address: "",
        longitude: "",
        latitude: "",
        escape_map: "",
        safe_promise_file: "",
        org_promise_file: "",
        door_front_file: "",
        safety_name: "",
        safety_mobile: "",
        scseca_name: "",
        scseca_mobile: "",
        safety_officer: "",
        safety_officer_mobile: "",
        status: "",
        // point_id: 0,
        unit_id: ''
      },
      imgFileList: [],
      doorFileList: [],
      safeFileList: [],
      orgFileList: [],
      societyList: [],
      rules: {
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        full_name: [{ required: true, message: "请输入", trigger: "blur" }],
        address: [{ required: true, message: "请输入", trigger: "blur" }],
        longitude: [{ required: true, message: "请输入", trigger: "blur" }],
        latitude: [{ required: true, message: "请输入", trigger: "blur" }],
        escape_map: [{ required: true, message: "请上传", trigger: "blur" }],
        safe_promise_file: [
          { required: true, message: "请上传", trigger: "blur" },
        ],
        org_promise_file: [
          { required: true, message: "请上传", trigger: "blur" },
        ],
        door_front_file: [
          { required: true, message: "请上传", trigger: "blur" },
        ],
        safety_name: [{ required: true, message: "请输入", trigger: "blur" }],
        safety_mobile: [
            { required: true, message: "请输入", trigger: "blur" },
            { min: 11, max: 11, trigger: "blur", message: "请输入正确的手机号" },
            { required: true, pattern: /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/, message: '请输入正确的手机号', trigger: 'blur' }//正则
            ],
        scseca_name: [{ required: true, message: "请输入", trigger: "blur" }],
        scseca_mobile: [
            { required: true, message: "请输入", trigger: "blur" },
            { min: 11, max: 11, trigger: "blur", message: "请输入正确的手机号" },
            { required: true, pattern: /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/, message: '请输入正确的手机号', trigger: 'blur' }//正则
            ],
        safety_officer: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        safety_officer_mobile: [
          { required: true, message: "请输入", trigger: "blur" },
          { min: 11, max: 11, trigger: "blur", message: "请输入正确的手机号" },
          { required: true, pattern: /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/, message: '请输入正确的手机号', trigger: 'blur' }//正则
        ],
        // point_id: [{ required: true, message: "请选择", trigger: "blur" }],
        unit_id: [{ required: true, message: "请选择", trigger: "blur" }],
      },
      id: "",
    //   pointList:[]
    };
  },
  watch: {
      mapIsShow(newData) {
          if (!newData) {
              this.searchInput = ''
          }
      }
  },
  computed: {
    upLoadImgHeader() {
      return {
        "A-Token": this.$store.state.user.a_token,
        "U-Token": this.$store.state.user.u_token,
      };
    },
  },
  created() {

    this.fatherId = this.$route.query.id;
    // this.$api.post('/unit/PatrolPosition/lists',{unit_id:this.$route.query.id}).then(res=>{
    //     this.pointList=res.data.lists
    // })
    this.getDataList();
    this.getSocietyList()
  },

  methods: {
      toTaskList(index,row) {
        this.$router.push({
          name:'unitSubTaskMange',
          query: {
            unit_id: row.unit_id,
            sub_unit_id: row.id
          }
        })
      },
      inputChange() {
            this.$getMap(this, this.searchInput)
        },
       cancelMap() {
          this.formData.longitude = ''
          this.formData.latitude = ''
          this.mapIsShow = false
      },
      //   门前三包
      doorRemove() {
          let door = document.getElementsByClassName('door')[0]
          door.children[1].style.display = 'block'
      },
      doorChange() {
          let door = document.getElementsByClassName('door')[0]
          door.children[1].style.display = 'none'
      },
    //   安全承诺书
      safeChange() {
          let safe = document.getElementsByClassName('safe')[0]
          safe.children[1].style.display = 'none'
      },
      safeRemove() {
          let safe = document.getElementsByClassName('safe')[0]
          safe.children[1].style.display = 'block'
      },
    //   三自主两公开一承诺
      orgChange() {
          let org = document.getElementsByClassName('org')[0]
          org.children[1].style.display = 'none'
      },
      orgRemove() {
          let org = document.getElementsByClassName('org')[0]
          org.children[1].style.display = 'block'
      },
    //   疏散线路图
      imgChange() {
          let img = document.getElementsByClassName('img')[0]
          img.children[1].style.display = 'none'
      },
      imgRemove() {
          let img = document.getElementsByClassName('img')[0]
          img.children[1].style.display = 'block'
      },
       getLatLng() {
      this.$getLocaion(returnCitySN["cip"]).then((res) => {
          let temp = res.data.location.split(',')
        this.formData.longitude=temp[0]//经度
        this.formData.latitude=temp[1]//纬度
      });
    },
    safeFileUpSuccess(res) {
      this.formData.safe_promise_file = res.data.result;
    },
    // 获取社会单位列表
    getSocietyList() {
      let user_info = this.$store.state.user.user_info;
      this.$api
        .post("/unit/YjUnit/SubUnitLists", {
          page: 1,
          rows: 13,
        })
        .then((res) => {
          this.societyList = res.data.lists;
        });
    },
    // 查看详情
    lookDetails(row) {
        this.disabled = true
        this.id = row.id;
        // this.point_id = row.point_id;
        this.formData = JSON.parse(JSON.stringify(row));
        this.dialogFormVisible = true;
        this.imgFileList = [{url: this.upDataUrl + row.escape_map }]
        this.doorFileList = [{url: this.upDataUrl + row.door_front_file }]
        this.safeFileList = [{url: this.upDataUrl + row.safe_promise_file }]
        this.orgFileList = [{url: this.upDataUrl + row.org_promise_file }]
        setTimeout(() => {
            let door = document.getElementsByClassName('door')[0]
        door.children[1].style.display = 'none'
        let img = document.getElementsByClassName('img')[0]
        img.children[1].style.display = 'none'
        let safe = document.getElementsByClassName('safe')[0]
        safe.children[1].style.display = 'none'
        let org = document.getElementsByClassName('org')[0]
        org.children[1].style.display = 'none'
        },100)
    },
    orgFileUpSuccess(res) {
      this.formData.org_promise_file = res.data.result;
    },
    imgUpSuccess(res) {
      this.formData.escape_map = res.data.result;
    },
    doorFileUpSuccess(res) {
        this.formData.door_front_file = res.data.result
    },
    onExceed() {
      this.$message({
        showClose: true,
        message: "如需更改，请先删除已上传的",
        type: "error",
      });
    },
    // 获取列表
    getDataList(page) {
    //   let pageNum = 1;
    //   if (page) {
    //     pageNum = page;
    //   }
    //   let user_info = this.$store.state.user.user_info;
      let query = {
        rows: this.pagination.size,
        page: this.pagination.page,
        keywords: this.searchValue
    }
      this.$api
        .post("/unit/YjUnit/SubUnitLists", query)
        .then((res) => {
          this.tableData = res.data.list;
          this.tableDataInfo = res.data;
          this.total = res.data.total
        });
    },
    // 搜索
    searchInputList() {
        this.getDataList()
    },
    // 点击修改
    handleEdit(index, row) {
        this.$getMap(this)
      this.id = row.id;
    //   this.point_id = row.point_id;
      this.formData = JSON.parse(JSON.stringify(row));
      this.dialogFormVisible = true;
        this.imgFileList = [{url: this.upDataUrl + row.escape_map }]
        this.doorFileList = [{url: this.upDataUrl + row.door_front_file }]
        this.safeFileList = [{url: this.upDataUrl + row.safe_promise_file }]
        this.orgFileList = [{url: this.upDataUrl + row.org_promise_file }]
        setTimeout(() => {
                let door = document.getElementsByClassName('door')[0]
            door.children[1].style.display = 'none'
            let img = document.getElementsByClassName('img')[0]
            img.children[1].style.display = 'none'
            let safe = document.getElementsByClassName('safe')[0]
            safe.children[1].style.display = 'none'
            let org = document.getElementsByClassName('org')[0]
            org.children[1].style.display = 'none'
        },100)
    },
    handleSizeChange(e) {},
    handleCurrentChange(e) {
      this.getDataList(e);
    },
    addEditSocialUnit() {
      this.dialogFormVisible = true;
        this.$getMap(this)
    },
    closeDialog() {
      this.$refs.childForm.resetFields();
      let temp = this.formData;
      for (let key in temp) {
        temp[key] = "";
      }
      this.formData = temp;
      this.disabled = false
      this.id = ''
       this.imgFileList = []
        this.doorFileList = []
        this.safeFileList = []
        this.orgFileList = []
        let door = document.getElementsByClassName('door')[0]
        door.children[1].style.display = 'block'
        let img = document.getElementsByClassName('img')[0]
        img.children[1].style.display = 'block'
        let safe = document.getElementsByClassName('safe')[0]
        safe.children[1].style.display = 'block'
        let org = document.getElementsByClassName('org')[0]
        org.children[1].style.display = 'block'
    },
    submitForm() {
      this.$refs.childForm.validate((valid) => {
        if (valid) {
          let data = this.formData;
          if (this.id) {
            data.id = this.id;
          } else {
            data.id = 0;
          }
        //   this.$api.post("/unit/YjUnit/SubUnitSave", data).then(() => {
          this.$api.post("/unit/YjUnit/SubUnitSave", this.formData).then((res) => {
              if (res.code === 200) {
                  this.$message({
                    type: 'success',
                    message: res.msg,
                })
              } else {
                  this.$message({
                    type: 'error',
                    message: res.msg,
                })
              }
            this.getDataList();
            this.dialogFormVisible = false;
          });
        } else {
          ElMessage.error("请填写完整");
          return false;
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.block {
    display: flex;
    justify-content: center;
}
.mapBox {
    z-index: 50;
    width: 800px;
    background-color: rgba(236, 234, 234, 0.938);
    height: 600px;
    position: fixed;
    top: 50%;
    left: 30%;
    transform: translateY(-60%);
    flex-direction: column;
    #container {
        z-index: 100;
        width: 800px;
        height: 500px;
    }
    .btnBox {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0 auto;
        width: 200px;
    }
    .search {
        display: flex;
        span {
            width: 100px;
            background-color: rgb(245, 244, 244);
            line-height: 40px;
            text-align: center;
        }
    }
}
.searchBox {
    display: flex;
    span {
        width: 50px;
        line-height: 40px;
        text-align: center;
    }
    .search {
        width: 30%;
    }
}
.searchMain {
    height: 80px;
}
</style>
